I'm developing a web application using Angular 6. I would like to create some custom components that are inspired by the components of HTML input. For example:
CustomComponent.ts (typescript)
@Component({
selector: 'custom-component',
templateUrl: './custom-component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => InputTextComponent)
}
]
})
export class CustomComponent {
@Input() name: string;
@Input() isRequired: boolean;
}
CustomComponent.html (template)
<input type="text"
[attr.name]="name"
[required] = "isRequired"
/>
I have this problem. Suppose we use my component in this template:
<form #myForm="ngForm" ngNativeValidate>
<custom-component
name="myName"
[isRequired] = true
ngModel
></custom-component>
<button type="submit" (click)="method()">Click</button>
The required attribute it's initialized correctly in the <input type="text/> (wrapped component of <custom-component>). The problem is this (it's an Angular problem!): in this code of usage:
method() {
console.log(this.myForm.valid);
}
The object myForm.valid (where myForm is associated with #myForm in the previous template) return always the true value, even if nothing is entered in the text field. This behavior is wrong: I would like this value to be false if I do not insert anything in the required field.
Jmsdb :
To add validation to your custom input component you should add the following to your providers:\n\n{\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => InputTextComponent),\n multi: true\n}\n\n\nYou will have have to implement the default method, within your InputTextComponent:\n\nvalidate(control: AbstractControl): ValidationErrors | null {\n return null;\n}\n\n\nIf you correctly update a property within your component called value using the writeValue() method you implemented with your NG_VALUE_ACCESSOR and then ensure to call (you can do this by implementing a change event on your default input):\n\nthis.propagateChange(this.value);\n\n\nFinally change your isRequired input to the default required property.\n\n @Input() required: boolean;\n\n\nYour NgModel should now correctly update.\n\nEdit: To avoid using required (however this is the correct way). Within the validation method place the following code:\n\nvalidate(control: AbstractControl): ValidationErrors | null {\n return this.isRequired && this.value.length === 0 : { required: true } : null;\n}\n\n\nWhat is happening is when Angular runs its own validation it calls this method. When this method returns anything but null, the object is added to the errors property within the FormControl & NgModel.\n\nThis is a huge topic and there are some great articles properly explaining it all. However, as asked, this should solve it.",
2018-11-13T16:01:07